<script setup>

  import api from "./api.js"
  import asset_normal_icon from "@/assets/icons/png/asset_normal.png"
  import asset_transfer_icon from "@/assets/icons/png/asset_transfer.png"
  import asset_missing_icon from "@/assets/icons/png/asset_missing.png"
  import asset_repair_icon from "@/assets/icons/png/asset_repair.png"
  import asset_returning_icon from "@/assets/icons/png/asset_returning.png"

  const assetCountMapping = ref({});
  const assetDataList = ref([{
    label:'正常资产',
    state: 1,
    icon: asset_normal_icon
  }, {
    label:'交接中',
    state: 11,
    icon: asset_transfer_icon
  }, {
    label:'报失中',
    state: 6,
    icon: asset_missing_icon
  }, {
    label:'维修中',
    state: 9,
    icon: asset_repair_icon
  }, {
    label:'退还中',
    state: 12,
    icon: asset_returning_icon
  }]);

  const assetList = ref([])

  async function getAssetCount() {
    const res = await api.getAssetCount();
    assetCountMapping.value = res.data;
  }

  function showImg(img) {
    return import.meta.env.VITE_APP_BASE_API + img;
  }

  async function getAssetList() {
    const res = await api.getAssetList();
    assetList.value = res.data;
  }

  onMounted(()=> {
    getAssetCount();
    getAssetList();
  })

</script>

<template>
  <div class="page-container home"><!---->
    <div class="body">
      <div data-v-4c02d2e2="" class="assetStatistic">
        <div data-v-4c02d2e2="" class="columnTitle">资产数据</div>
        <div data-v-4c02d2e2="" class="list">
          <div v-for="item in assetDataList" class="item">
            <div class="title">{{ item.label }}</div>
            <div class="total">{{ (assetCountMapping && assetCountMapping[item.state]) ? assetCountMapping[item.state] : 0}}</div>
            <img alt="资产类型" :src="item.icon" class="icon" />
          </div>
        </div>
      </div>
      <div data-v-70448b34="" class="assetApply">
        <div data-v-70448b34="" class="columnTitle">快捷申请</div>
        <div data-v-70448b34="" class="list">
          <div data-v-70448b34="" class="item">
            <div data-v-70448b34="" class="icon"><img data-v-70448b34=""
                                                      src=""
                                                      class="img"></div>
            <div data-v-70448b34="" class="name">资产领用</div>
          </div>
          <div data-v-70448b34="" class="item">
            <div data-v-70448b34="" class="icon"><img data-v-70448b34=""
                                                      src=""
                                                      class="img"></div>
            <div data-v-70448b34="" class="name">资产借用</div>
          </div>
          <div data-v-70448b34="" class="item">
            <div data-v-70448b34="" class="icon"><img data-v-70448b34=""
                                                      src=""
                                                      class="img"></div>
            <div data-v-70448b34="" class="name">资产退还</div>
          </div>
          <div data-v-70448b34="" class="item">
            <div data-v-70448b34="" class="icon"><img data-v-70448b34=""
                                                      src=""
                                                      class="img"></div>
            <div data-v-70448b34="" class="name">资产报修</div>
          </div>
          <div data-v-70448b34="" class="item">
            <div data-v-70448b34="" class="icon">
              <img data-v-70448b34=""
                   src="" class="img"></div>
            <div data-v-70448b34="" class="name">资产报失</div>
          </div>
          <div data-v-70448b34="" class="item">
            <div data-v-70448b34="" class="icon">
              <img src=""
                   class="img"></div>
            <div data-v-70448b34="" class="name">资产交接</div>
          </div>
          <div data-v-70448b34="" class="item">
            <div data-v-70448b34="" class="icon"><img data-v-70448b34=""
                                                      src=""
                                                      class="img"></div>
            <div data-v-70448b34="" class="name">耗材领用</div>
          </div>
        </div>
      </div>
      <div data-v-798df36c="" class="assetList">
        <div data-v-798df36c="" class="columnTitle">资产列表</div>
        <div data-v-798df36c="">
          <div class="list">
            <div class="item" v-for="item in assetList">
              <div class="image">
                <img v-if="item.imgUrl" style="width: 100%;height: 100%;" :src="showImg(item.imgUrl)">
                <i v-else class="el-icon-picture" style="font-size: 38px; color: rgb(221, 221, 221);"></i>
              </div>
              <div class="box">
                <div class="title">{{ item.name }}</div>
                <div class="label">
                  <span class="status" style="color: rgb(0, 91, 245); border: 1px solid rgb(0, 91, 245);">在用</span>
                </div>
                <div class="content">
                  <div class="row"><span class="name">资产编码：</span><span
                      class="value">{{ item.number }}</span></div>
                  <div class="row"><span class="name">领用时间：</span><span
                      class="value">{{ item.useTime }}</span></div>
                </div>
                <el-dropdown>
                  <div data-v-798df36c="" class="action el-dropdown-selfdefine" aria-haspopup="list"
                       aria-controls="dropdown-menu-3072" role="button" tabindex="0"><i data-v-798df36c=""
                                                                                        class="el-icon-more"></i>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>资产退还</el-dropdown-item>
                      <el-dropdown-item>资产报修</el-dropdown-item>
                      <el-dropdown-item>资产报失</el-dropdown-item>
                      <el-dropdown-item>资产交接</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>